<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>饮食照料</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/bootstrap-icons/bootstrap-icons.css">
    <script rel="stylesheet" src="./js/jquery-3.7.1.min.js"></script>
    <script rel="stylesheet" src="./js/bootstrap.bundle.js"></script>
    <style>
        .row .card span {
            width: 44px;
            height: 20px;
            border-radius: 12px;
            display: inline-block;
            font-size: small;
            text-align: center;
            line-height: 20px;
        }

        #diet-control-center .card {
            width: 300px;
            height: 314px;
        }

        #diet-control-center .card:hover {
            transform: scale(1.05);
            transition: all 0.3s ease-in-out;
            box-shadow: 2px 2px 2px 2px #dbd9d9;
        }

        #diet-control-center .form label {
            overflow: hidden;
            background-color: #d6d4d4;
        }

        #coreFunction .card:hover {
            transform: scale(1.05);
            transition: all 0.3s ease-in-out;
            box-shadow: 2px 2px 2px 2px #dbd9d9;
        }

        #useGuide .card:hover {
            transform: scale(1.05);
            transition: all 0.3s ease-in-out;
            box-shadow: 2px 2px 2px 2px #dbd9d9;
        }

        /* 尾巴 */
        .footer a {
            color: #d8d5d5;
            text-decoration: none;
        }

        .footer a:hover {
            color: #fff;
        }
    </style>
</head>

<body class="bg-light">
    <!-- 导航 -->
    <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #ffffff;">
        <!-- 智能宠物管家LOGO -->
        <a class="navbar-brand" href="#">
            <img src="./img/logo1.jpg" width="40" height="40" alt="">
            <b>智能宠物管家</b>
        </a>

        <!-- 缩小画面后 略缩按钮 -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- 头部 -->
        <div class="collapse navbar-collapse" style="background-color: #ffffff;" id="navbarSupportedContent">
            <div class="container-fluid d-flex justify-content-end align-items-center">
                <!-- 导航菜单 -->
                <div class="d-flex align-items-center mt-1">
                    <p><b>饮食照料</b></p>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主体 -->
    <div class="container bg-light mx-auto">
        <!-- 添加宠物 -->
        <div class="row mt-4">
            <div class="card shadow" style="width: 100%;">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="card-body">
                        <h4><b>饮食照料</b></h4>
                        <p>智能投喂系统，精准把控宠物饮食节奏，定时定量供应食物和水，科学守护宠物营养均衡</p>
                    </div>
                    <button class="btn btn-primary ml-3 mr-3">
                        <i class="bi bi-plus"></i>添加新宠物
                    </button>
                </div>
            </div>
        </div>

        <!-- 宠物信息 -->
        <div class="row mt-4">
            <div class="card shadow" style="width: 100%;">
                <div class="d-flex flex-wrap align-items-center p-4">
                    <img class="img-fluid rounded-pill mr-4" src="./img/吉娃娃.png" style="height: 90px;">
                    <div class="flex-grow-1 mr-4">
                        <div class="d-flex flex-wrap align-items-center">
                            <h4 class="mb-2 mr-2"><b>逗逗</b></h4>
                            <span class="ml-2" style="background-color: #dcfce7;color: rgb(22 101 52);">健康</span>
                            <span class="ml-1" style="background-color: #dbecfe;color: rgb(30 64 175);">健康</span>
                            <span class="ml-1" style="background-color: #f3ebff;color: rgb(107 33 168);">健康</span>
                        </div>
                        <p class="mb-0">上次喂食：今天 08:00 | 剩余食物: 75%
                        </p>
                    </div>
                    <button class="btn btn-light">
                        <i class="bi bi-pencil-square mr-1"></i>编辑资料
                    </button>
                </div>
            </div>
        </div>

        <!-- 饮食控制中心 -->
        <div class="row mt-4 bg-white rounded p-3 shadow" id="diet-control-center">
            <div class="col-12">
                <h4><b>饮食控制中心</b></h4>
            </div>

            <!-- 卡片1 -->
            <div class="col-xs-12 col-md-6 col-xl-4 mt-2">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5><b>喂食控制</b></h5>
                            <form action="">
                                <div class="form-group">
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" class="custom-control-input" id="" name="" checked>
                                        <!-- checked 打开 -->
                                        <label for="" class="custom-control-label"></label>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <p>当前食量</p>
                        <input type="range" class="custom-range mb-3" min="0" max="100" step="1" value="50">
                        <button class="btn btn-block mt-2"
                            style="background-color: #3b82f61a;color: #3b82f6;">确定</button>
                    </div>
                </div>
            </div>

            <!-- 卡片2 -->
            <div class="col-xs-12 col-md-6 col-xl-4 mt-2">
                <div class="card" id="drink">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5><b>换水控制</b></h5>
                            <form action="">
                                <div class="form-group">
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" class="custom-control-input" id="" name="" checked>
                                        <!-- checked 打开 -->
                                        <label for="" class="custom-control-label"></label>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <p>换水频率</p>
                        <select class="w-100 border rounded px-3 py-2" name="" id="">
                            <option value="">每4小时</option>
                            <option value="">每6小时</option>
                            <option value="">每8小时</option>
                            <option value="">每天一次</option>
                            <option value="">每天两次</option>
                        </select>
                        <button class="btn btn-block mt-2"
                            style="background-color: #3b82f61a;color: #3b82f6;">立即换水</button>
                    </div>
                </div>
            </div>

            <!-- 卡片3 -->
            <div class="col-xs-12 col-md-6 col-xl-4 mt-2">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5><b>喂食计划</b></h5>
                            <a href="">添加</a>
                        </div>
                        <div class="col bg-light">
                            <p>早餐</p>
                            <p class="text-small">07:30 80g</p>
                        </div>
                        <div class="col bg-light">
                            <p>午餐</p>
                            <p class="text-small">12:00 60g</p>
                        </div>
                        <div class="col bg-light">
                            <p>晚餐</p>
                            <p class="text-small">18:30 80g</p>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <!-- 数据统计 -->
        <div class="row mt-4 bg-white rounded p-3 shadow">
            <!-- 标题 -->
            <div class="col-12">
                <h5><b>饮食数据统计</b></h5>
            </div>
            <!-- 数据图 -->
            <div class="col-8">
                <div class="card" style="height: 493px;">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <p><b>近七天饮食情况</b></p>
                            <div class="justify-content-end">
                                <span class="ml-2 text-white" style="background-color: #96bcf4;">周</span>
                                <span class="ml-1" style="background-color: #e0e6ea;">月</span>
                                <span class="ml-1" style="background-color: #e0e6ea;">年</span>
                            </div>
                        </div>
                        <div class="text-center">
                            <img class="img-fluid" src="./img/近七天饮食情况.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <!-- 本周饮食预览 -->
            <div class="col-4">
                <!-- 本周饮食预览 -->
                <div class="row">
                    <div class="col">
                        <div class="card">
                            <div class="card-body">
                                <p><b>本周饮食概览</b></p>
                                <!-- 进度条1 -->
                                <div class="d-flex justify-content-between">
                                    <p>平均每日食量</p>
                                    <p>180g</p>
                                </div>
                                <div class="progress mt-0">
                                    <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 63%"
                                        aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                                <!-- 进度条2 -->
                                <div class="d-flex justify-content-between mt-1">
                                    <p>饮水情况</p>
                                    <p>良好</p>
                                </div>
                                <div class="progress">
                                    <div class="progress-bar progress-bar-striped bg-success" role="progressbar"
                                        style="width: 72%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
                                    </div>
                                </div>
                                <!-- 进度条3 -->
                                <div class="d-flex justify-content-between mt-1">
                                    <p>饮食规律度</p>
                                    <p>优秀</p>
                                </div>
                                <div class="progress">
                                    <div class="progress-bar progress-bar-striped bg-warning" role="progressbar"
                                        style="width: 85%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 剩余食物提醒 -->
                <div class="row mt-1">
                    <div class="col">
                        <div class="card">
                            <div class="card-body">
                                <p><b>剩余食物提醒</b></p>
                                <div class="row">
                                    <!-- 主粮 -->
                                    <div class="col-12">
                                        <div class="d-flex">
                                            <span class="rounded-circle"
                                                style="background-color: #c3d8f7;width: 45px; height: 45px;"></span>
                                            <div class="w-75 ml-1">
                                                <span style="font-size: 16px;">主粮</span>
                                                <div class="progress ml-1">
                                                    <div class="progress-bar" role="progressbar" style="width: 75%;"
                                                        aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 零食 -->
                                    <div class="col-12 mt-2">
                                        <div class="d-flex">
                                            <span class="rounded-circle"
                                                style="background-color: #f8e4c3;width: 45px; height: 45px;"></span>
                                            <div class="w-75 ml-1">
                                                <span style="font-size: 16px;">零食</span>
                                                <div class="progress ml-1">
                                                    <div class="progress-bar" role="progressbar" style="width: 40%;"
                                                        aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">40%
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 滤芯 -->
                                    <div class="col-12 mt-2">
                                        <div class="d-flex">
                                            <span class="rounded-circle"
                                                style="background-color: #c3f7e2;width: 45px; height: 45px;"></span>
                                            <div class="w-75 ml-1">
                                                <span style="font-size: 16px;">滤芯</span>
                                                <div class="progress ml-1">
                                                    <div class="progress-bar" role="progressbar" style="width: 25%;"
                                                        aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 核心功能 -->
        <div class="row mt-4 bg-white rounded p-3 shadow" id="coreFunction">
            <div class="row">
                <!-- 标题 -->
                <div class="col-12">
                    <h4><b>核心功能</b></h4>
                </div>
                <div class="col-xl-6 col-md-6 col-xs-12 mt-3">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <span class="rounded-circle d-flex align-items-center justify-content-center"
                                    style="width: 115px; height: 50px; background-color: #c3d8f7;">
                                    <i class="bi bi-alarm" style="font-size: 25px;"></i>
                                </span>
                                <div class="text ml-2">
                                    <h5><b>1.1 自动投喂</b></h5>
                                    <p>基于智能硬件与预设程序，无需手动操作，到设定时间或触发条件时，自动为宠物投放对应食量的食物。告别忘记投喂、投喂不及时烦恼。
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-6 col-md-6 col-xs-12 mt-3">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <span class="rounded-circle d-flex align-items-center justify-content-center"
                                    style="width: 125px; height: 50px; background-color: #c3f7da;">
                                    <i class="bi bi-calendar-check" style="font-size: 25px;color: #5e7c6c;"></i>
                                </span>
                                <div class="text ml-2">
                                    <h5><b>1.2 定时投喂</b></h5>
                                    <p>支持自定义每日投喂时间，如按宠物生物钟，设置早、中、晚固定投喂节点。模拟自然进食节律，帮助宠物养成健康饮食习惯，减少因饮食紊乱引发的肠胃问题。
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-6 col-md-6 col-xs-12 mt-3">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <span class="rounded-circle d-flex align-items-center justify-content-center"
                                    style="width: 140px; height: 50px; background-color: #ecddf8;">
                                    <i class="bi bi-asterisk" style="font-size: 25px;color: #714d81;"></i>
                                </span>
                                <div class="text ml-2">
                                    <h5><b>1.3 定量投喂</b></h5>
                                    <p>依据宠物品种、年龄、体重等信息，智能计算科学食量。每次投喂精准输出对应克重食物，避免过量投喂导致肥胖，或投喂不足造成营养不良，从源头守护宠物饮食健康。
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-6 col-md-6 col-xs-12 mt-3">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <span class="rounded-circle d-flex align-items-center justify-content-center"
                                    style="width: 135px; height: 50px; background-color: #d4eaff;">
                                    <i class="bi bi-droplet" style="font-size: 25px;color:#2b4f70;"></i>
                                </span>
                                <div class="text ml-2">
                                    <h5><b>1.4 自动换水</b></h5>
                                    <p>搭载智能水循环或换水模块，定时清空旧水、补充新鲜水源，保持水盆清洁卫生。降低宠物泌尿系统疾病风险，让宠物随时喝到干净水。解放双手，让宠物饮水更便捷。
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-6 col-md-6 col-xs-12 mt-3">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <span class="rounded-circle d-flex align-items-center justify-content-center"
                                    style="width: 135px; height: 50px; background-color: #f7f6c3;">
                                    <i class="bi bi-pie-chart-fill" style="font-size: 25px;color: #7c7b17;"></i>
                                </span>
                                <div class="text ml-2">
                                    <h5><b>营养分析</b></h5>
                                    <p>对接宠物食品营养数据库，结合投喂记录，分析宠物摄入的蛋白质、脂肪、维生素等营养成分占比。生成可视化报告，辅助调整饮食方案，实现个性化精准营养供给。
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-6 col-md-6 col-xs-12 mt-3">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <span class="rounded-circle d-flex align-items-center justify-content-center"
                                    style="width: 125px; height: 50px; background-color: #f5d7de;">
                                    <i class="bi bi-cart-check-fill" style="font-size: 25px;color: #5f2331;"></i>
                                </span>
                                <div class="text ml-2">
                                    <h5><b>智能补给</b></h5>
                                    <p>关联耗材监测，当食物储量不足、滤芯需要更换等情况发生时，自动推送补给提醒到手机端，还可联动电商平台快速下单，让宠物饮食保障不"断档"。
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 使用指南 -->
        <div class="row mt-4 bg-white rounded p-3 shadow" id="useGuide">
            <div class="row">
                <div class="col-12">
                    <h4><b>使用指南</b></h4>
                </div>
                <div class="col-xl-4 col-md-12 col-xs-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex align-items-center justify-content-center">
                                <span class="rounded-circle d-flex align-items-center justify-content-center"
                                    style="background-color: #d1e2fc;width: 60px;height: 60px;">
                                    <i class="bi bi-journal-bookmark"
                                        style="font-size: 25px;color: #375e9d;"></i></span>
                            </div>
                            <h5 class="text-center mt-2"><b>新手指南</b></h5>
                            <p class="text-center" style="color: #898888;">查看详细的产品安装和初始设置指南，帮助您快速上手智能饮食照料系统。</p>
                            <p class="text-center mt-3" style="color: #375e9d;">
                                <b>查看指南<i class="bi bi-arrow-right-short" style="color: #375e9d;"></i></b>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-12 col-xs-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex align-items-center justify-content-center">
                                <span class="rounded-circle d-flex align-items-center justify-content-center"
                                    style="background-color: #d1fcdf;width: 60px;height: 60px;">
                                    <i class="bi bi-camera-video-fill" style="font-size: 25px;color: #156945;"></i>
                                </span>
                            </div>
                            <h5 class="text-center mt-2"><b>视频教程</b></h5>
                            <p class="text-center" style="color: #898888;">观看操作演示视频，了解如何设置喂食计划、调整食量和查看饮食数据统计。</p>
                            <p class="text-center mt-3" style="color: #156945;">
                                <b>观看视频<i class="bi bi-arrow-right-short" style="color: #156945;"></i></b>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-12 col-xs-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex align-items-center justify-content-center">
                                <span class="rounded-circle d-flex align-items-center justify-content-center"
                                    style="background-color: #fcf8d1;width: 60px;height: 60px;">
                                    <i class="bi bi-question-circle-fill" style="font-size: 25px;color: #ceb421;"></i>
                                </span>
                            </div>
                            <h5 class="text-center mt-2"><b>常见问题</b></h5>
                            <p class="text-center" style="color: #898888;">查看用户常见问题解答，包括设备故障排查、软件使用疑问等内容。</p>
                            <p class="text-center mt-3" style="color: #ceb421;">
                                <b>查看FAQ<i class="bi bi-arrow-right-short" style="color: #ceb421;"></i></b>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- 尾巴 -->
    <footer class="footer bg-dark text-white py-12">
        <div class="container mx-auto px-4">
            <div class="row">
                <div class="col-lg-3 col-md-3 col-xs-3">
                    <h4 class="mt-4"><b>智能宠物管家</b></h4>
                    <p style="color: #d8d5d5;">为您的宠物提供全方位智能照护，让爱宠生活更轻松快乐。</p>
                    <a href=""><i class="bi bi-tencent-qq mr-2"></i></a>
                    <a href=""><i class="bi bi-sina-weibo mr-2"></i></a>
                    <a href=""><i class="bi bi-wechat mr-2"></i></a>
                </div>
                <div class="col-lg-3 col-md-3 col-xs-3">
                    <h5 class="mt-4"><b>快速链接</b></h5>
                    <p><a href="#" class="">首页</a></p>
                    <p><a href="#travel-management">出行管理</a></p>
                    <p><a href="./饮食照料.html" target="_blank">饮食照料</a></p>
                    <p><a href="#health-monitoring">健康监护</a></p>
                </div>
                <div class="col-lg-3 col-md-3 col-xs-3">
                    <h5 class="mt-4"><b>客服服务</b></h5>
                    <p><a href="#" class="">帮助中心</a></p>
                    <p><a href="#">联系我们</a></p>
                    <p><a href="#">退换货政策</a></p>
                    <p><a href="#">配送说明</a></p>
                </div>
                <div class="col-lg-3 col-md-3 col-xs-3">
                    <h5 class="mt-4"><b>联系我们</b></h5>
                    <p><a href="#"><i class="bi bi-geo-alt-fill mr-2"></i>武汉市江夏区光谷</a></p>
                    <p><a href="#"><i class="bi bi-telephone-fill mr-2"></i>400-888-8888</a></p>
                    <p><a href="#"><i class="bi bi-envelope-fill mr-2"></i>service@Intelligent Pet Butler.com</a></p>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-lg-12 col-md-12 col-xs-12">
                    <p class="text-center" style="color: #c4c7ce;">© 2021-2022 Intelligent Pet Butler. All Rights
                        Reserved.</p>
                </div>
    </footer>

</body>

</html>